<template>
    <eui-page-frame :topHeight="150"  withOutBorder="true">
        <template #top>
            <view class="content-img">
                <eui-navbar ref="EuiNavBar" :title="title" color="#000000" backgroundColor="#FFFFFF" displayable="true"
                            :storeName="getRelatedName('rdsStores', sUserStore)" :storeId="sUserStore">
                </eui-navbar>
            </view>
        </template>
        <eui-page-content>
            <view class="footer-view">
                <eui-card title="基本信息" showTitleLine="true" top-margin="0" h-padding="20">
                    <view class="m-main-top">
                        <eui-text v-model="mainData.c_provider" type="titlename" title="供应商"
                                  :name="getRelatedName('rdsProviders', mainData.c_provider)" occupy/>
                        <eui-text v-model="c_n_rec_total" type="price" title="已收正品数量"/>
                        <eui-text v-model="c_sku_rec_total" type="name" title="已收品种数"/>
                        <eui-text v-model="c_n_rec_free_total" type="price" title="已收赠品数量"/>
                    </view>
                </eui-card>
                <eui-card title="商品信息" showTitleLine="true" h-padding="20" type="detail">
                    <view v-for="(item, index) in detailData" :key="index">
                        <view class="m-list-top">
                            <eui-text :value="`[${item.c_gcode}]${item.c_gname}`" type="name"
                                      :title="`${index + 1}. 商品`" occupy/>
                            <eui-text v-model="item.c_barcode" type="name" title="条码"/>
                            <eui-text v-model="item.c_order_pack" type="slash" :name="item.c_order_unit"
                                      title="含量/单位"/>
                            <eui-text v-model="item.c_n_confirm" type="price" title="订货数量"/>
                            <eui-text v-model="item.c_n_free_confirm" type="price" title="赠品数量(订)"/>
                            <eui-text v-model="item.c_n" type="price" title="收货数量" :style="(item.c_n !== 0 && item.c_n_confirm !== item.c_n) ? 'color: red': 'color: black'"/>
                            <eui-text v-model="item.c_n_free" type="price" title="赠品数量(收)"/>
                            <eui-text v-model="item.c_product_dt" type="date" title="生产日期"/>
                            <eui-text v-model="item.c_expired_dt" type="date" title="限用日期"/>
                            <eui-text v-model="item.c_serial_no" type="name" title="批号/串码" occupy />
                            <eui-text v-model="item.c_note" type="name" title="备注"/>
                        </view>
                    </view>
                    <view v-if="detailData.length===0">
                        <image src="@/static/img/no_data.png" mode="aspectFit" class="image-min"/>
                        <view class="no-data-text">暂无数据</view>
                    </view>
                </eui-card>
            </view>
        </eui-page-content>
    </eui-page-frame>
</template>


<script setup type="ts">
import {ref, reactive, onMounted} from 'vue';
import service from '../../../common/service';
import {getRelatedName} from '../components/RelatedName.js';
import {getRdsUrl, rdsRequest} from '@/hooks/rdsServices';
import {mapState, mapMutations} from 'vuex'
import {onLoad} from "@dcloudio/uni-app";

const rdsUrl = getRdsUrl();
const sUserStore = ref('');
const c_sku_rec_total = ref(0);
const c_n_rec_total = ref(0);
const c_n_rec_free_total = ref(0);
const title = ref('提交记录');
const mainData = ref({});
const detailData = ref([]);

onLoad(async (option) => {
    console.log('option', option);
    sUserStore.value = option.storeId;
    if (option.c_id && option.c_id !== 'undefined') {
        await billQuery(option.c_id)
    }
});
const billQuery = async (billId) => {
    const req = {
        c_id: billId,
        c_submit_status: '1'
    };
    const result = await rdsRequest(rdsUrl.scApi, '商品验收单中间表', 'EnjoyBillQueryMiddle', req, '701');
    if (result.ds.length > 0) {
        mainData.value = result.ds[0];
        detailData.value = result.ds1;
        c_sku_rec_total.value = result.ds1.reduce((pre, current) => pre + (current.c_n > 0 || current.c_n_free > 0), 0);
        c_n_rec_total.value = result.ds1.reduce((pre, current) => pre + (current.c_n ?? 0), 0);
        c_n_rec_free_total.value = result.ds1.reduce((pre, current) => pre + (current.c_n_free ?? 0), 0);
    }
};
</script>

<style lang="scss" scoped>
@import '@/static/font/enjoyicon/iconfont.css';
@import '@/main.scss';
::v-deep .white-main {
  margin: 20rpx 0;
}
.content-img {
    background-color: $uni-bg-color;
    background-size: 100% 150px;
    background-repeat: no-repeat;
    height: 100%;
}

.m-main-top {
    width: 100%;
    display: grid;
    grid-template-columns: 51% 49%;
    font-size: 12px;
}
.m-list-top {
    width: 100%;
    display: grid;
    grid-template-columns: 51% 49%;
    font-size: 12px;
    padding: 10rpx 0rpx;
}

.image-min {
    width: 100%;
    height: 150rpx;
    opacity: 0.6;
    margin-top: -20rpx;
}

.no-data-text {
    text-align: center;
    color: #cccccc;
    font-size: 26rpx;
    margin-top: -20rpx;
}
</style>
